<template>
  <div class="FrequencyMedication">
    <div class="pubBig Frequency">
      <div class="h0">
        <p class="lt">药典类 - 用药频次</p>
      </div>
      <div
        class="m0"
        style=" background: #eff8ff;"
      >
        <div class="form-group">
          <fieldset>
            <legend style="color: #256192;margin-bottom: 0;">查询条件</legend>
            <div>
              <p class="danWei">
                <label>简码：</label>
                <input
                  type="text"
                  class="form-control"
                  placeholder="请输入编号/名称"
                  style="width:185px"
                  v-model="jianMa"
                />
              </p>
              <!-- <p>
                          <label>科室：</label>
                          <select class="form-control" style="width: 98px">
                              <option v-for="(item,index) in model_select_tmp_flag" :label="item.name" :value="item.code" :key="index"></option>
                          </select>
              </p>-->
              <p>
                <button
                  class="btn btn-default"
                  @click="oneabout()"
                >查询</button>
                <button
                  class="btn btn-default"
                  style="margin-left:75px"
                >退出</button>

                <button
                  class="btn btn-default"
                  @click="newinsert"
                >新增</button>
                <button class="btn btn-default">保存</button>
                <button
                  class="btn btn-default"
                  @click="del"
                >删除</button>
                <button class="btn btn-default">审核</button>
                <button class="btn btn-default">打印</button>
              </p>
              <p class="marked">
                <label style="min-width: 52px">
                  <input type="checkbox" />显示
                </label>
              </p>
            </div>
          </fieldset>
        </div>
      </div>
      <div class="oneBox clearfix">
        <p class="p1">新增内容</p>
        <div class="form-group clearfix">
          <p>
            <label>代码：</label>
            <input
              type="text"
              class="form-control"
              v-model="daiMa"
            />
          </p>
          <p>
            <label>名称：</label>
            <input
              type="text"
              class="form-control"
              v-model="uName"
            />
          </p>
          <p>
            <label>打印名称：</label>
            <input
              type="text"
              class="form-control"
              v-model="daYingname"
            />
          </p>
          <p>
            <label>拼音码：</label>
            <input
              type="text"
              class="form-control"
              v-model="pinYinma"
            />
          </p>
          <p>
            <label>频次次数：</label>
            <input
              type="text"
              class="form-control"
              v-model="pincidegree"
            />
          </p>
          <p>
            <label>频次数目：</label>
            <input
              type="text"
              class="form-control"
              v-model="pincinum"
            />
          </p>
          <p>
            <label>频次单位：</label>
            <select
              class="form-control"
              @change="didi($event)"
              v-model="selectIdMR"
            >
              <option
                v-for="(item,index) in Inter"
                :label="item.name"
                :value="item.value"
                :key="index"
              ></option>
            </select>
          </p>
        </div>
      </div>

      <div class="date">
        <div class="lt">
          <fieldset>
            <legend>星期设置</legend>
            <div>
              <label
                v-for="(item,index) in week"
                :key="index"
              >
                <input
                  type="checkbox"
                  @change="weekval(item,index)"
                />
                {{item}}
              </label>
            </div>
          </fieldset>
        </div>
        <div class="ct">
          <fieldset>
            <legend>时间间隔</legend>
            <!--半小时-->
            <div
              class="radioOneMain"
              v-if="radioIndex=='0'"
            >
              <p
                v-for="(item,index) in datatime"
                :key="index"
              >
                <!-- <label :class="activestyle==index?'active':''" @click="Timeck(item,index)">{{item.label}}</label> -->
                <label
                  :class="arr.indexOf(item.label)>-1?'active':''"
                  @click="Timeck(item,index)"
                >{{item.label}}</label>
              </p>
            </div>
            <!--一小时-->
            <div v-if="radioIndex=='1'">
              <p
                v-for="(item,index) in dataMi"
                :key="index"
              >
                <label
                  :class="arr.indexOf(item.label)>-1?'active':''"
                  @click="Timeck(item,index)"
                >{{item.label}}</label>
              </p>
            </div>
          </fieldset>
          <p class="p0">
            <label
              v-for="(x,y) in timeStart"
              :key="y"
            >
              <input
                type="radio"
                name="time"
                :value="x.key"
                v-model="sex"
                @click="fullHous(x,y)"
              />
              {{x.val}}
            </label>
          </p>
          <button
            class="baoCun"
            @click="keepone"
          >保存</button>
        </div>
      </div>

      <div class="Tb_down">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>代码</th>
              <th>名称</th>
              <th>打印名称</th>
              <th>拼音码</th>
              <th>频次次数</th>
              <th>频次数目</th>
              <th>频次单位</th>
              <th>频次时间</th>
              <th>星期标志</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item,index) in allitem"
              :key="index"
              :class="{selGreen:changeSelectStyle == index}"
              @click="Dlick(item,index)"
            >
              <td>{{item.Code}}</td>
              <td>{{item.Name}}</td>
              <td>{{item.PrintName}}</td>
              <td></td>
              <td>{{item.Times}}</td>
              <td></td>
              <td>
                {{item.IntervalUnit===0?'0小时':item.IntervalUnit===1?'一天':item.IntervalUnit===2?'两周':''}}
              </td>
              <td>{{item.DetailHour}}</td>
              <td>{{item.DetailWeek}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      radioIndex: 0,
      timeStart: [
        {
          val: "半小时间隔",
          key: "0"
        },
        {
          val: "一小时间隔",
          key: "1"
        }
      ],
      activestyle: "",
      arr: [],
      newStyle: "",
      msg: "SystemManagement 下的 DepartmentalInforma",
      datatime: [
        { check: true, label: "00:00" },
        { check: false, label: "00:30" },
        { check: false, label: "01:00" },
        { check: false, label: "01:30" },
        { check: false, label: "02:00" },
        { check: false, label: "02:30" },
        { check: false, label: "03:00" },
        { check: false, label: "03:30" },
        { check: false, label: "04:00" },
        { check: false, label: "04:30" },
        { check: false, label: "05:00" },
        { check: false, label: "05:30" },
        { check: false, label: "06:00" },
        { check: false, label: "06:30" },
        { check: false, label: "07:00" },
        { check: false, label: "07:30" },
        { check: false, label: "08:00" },
        { check: false, label: "08:30" },
        { check: false, label: "09:00" },
        { check: false, label: "09:30" },
        { check: false, label: "10:00" },
        { check: false, label: "10:30" },
        { check: false, label: "11:00" },
        { check: false, label: "11:30" },
        { check: false, label: "12:00" },
        { check: false, label: "12:30" },
        { check: false, label: "13:00" },
        { check: false, label: "13:30" },
        { check: false, label: "14:00" },
        { check: false, label: "14:30" },
        { check: false, label: "15:00" },
        { check: false, label: "15:30" },
        { check: false, label: "16:00" },
        { check: false, label: "16:30" },
        { check: false, label: "17:00" },
        { check: false, label: "17:30" },
        { check: false, label: "18:00" },
        { check: false, label: "18:30" },
        { check: false, label: "19:00" },
        { check: false, label: "19:30" },
        { check: false, label: "20:00" },
        { check: false, label: "20:30" },
        { check: false, label: "21:00" },
        { check: false, label: "21:30" },
        { check: false, label: "22:00" },
        { check: false, label: "22:30" },
        { check: false, label: "23:00" },
        { check: false, label: "23:30" }
      ],

      dataMi: [
        { check: true, label: "00:00" },
        { check: false, label: "01:00" },
        { check: false, label: "02:00" },
        { check: false, label: "03:00" },
        { check: false, label: "04:00" },
        { check: false, label: "05:00" },
        { check: false, label: "06:00" },
        { check: false, label: "07:00" },
        { check: false, label: "08:00" },
        { check: false, label: "09:00" },
        { check: false, label: "10:00" },
        { check: false, label: "11:00" },
        { check: false, label: "12:00" },
        { check: false, label: "13:00" },
        { check: false, label: "14:00" },
        { check: false, label: "15:00" },
        { check: false, label: "16:00" },
        { check: false, label: "17:00" },
        { check: false, label: "18:00" },
        { check: false, label: "19:00" },
        { check: false, label: "20:00" },
        { check: false, label: "21:00" },
        { check: false, label: "22:00" },
        { check: false, label: "23:00" }
      ],
      allitem: [],
      changeSelectStyle: "",
      jianMa: "",
      dHao: "",
      bianHao: "",
      sex: "0",
      ahour: false,
      halfhour: true,
      week: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],
      weekarr: [],
      model_select_tmp_flag: [],
      wekar: "",
      uName: "",
      modelnum: [],
      daiMa: "",
      uName: "",
      daYingname: "",
      pinYinma: "",
      selectIdMR: 0,
      pincidegree: "",
      pincinum: "",
      selectId: "",
      uid: "",
      hospid: "",
      Dayweek: "",
      changeId: "",
      Inter: [
        {
          name: "0小时",
          value: 0
        },
        {
          name: "1天",
          value: 1
        },
        {
          name: "2周",
          value: 2
        }
      ]
    };
  },
  methods: {
    didi (event) {
      this.selectId = event.target.value;
      console.error(this.selectId);

      //if( this.selectId){
      //     this.changeId =  this.selectId
      //}else{
      //     this.changeId = '0小时'

      // }
    },
    //下拉框数据
    queryG (KeyCode) {
      var data = {
        code: "get_sys_dict2",
        input: {
          code: KeyCode
        }
      };
      this.$post("CloudHIS/getRedisDataByCode", data)
        .then(res => {
          console.log(res); //["department", "ward","State_beds"];
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].keycode == "department") {
              this.model_select_tmp_flag = res.data[i].dtl;
              sessionStorage.setItem("selval", this.model_select_tmp_flag);
            }
            if (res.data[i].keycode == "unit_code") {
              this.modelnum = res.data[i].dtl;
              sessionStorage.setItem("selval", this.modelnum);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 星期多选
    weekval (item, index) {
      if (this.weekarr.indexOf(item) > -1) {
        this.weekarr.splice(this.weekarr.indexOf(item), 1);
      } else {
        this.weekarr.push(item);
      }

      var wear = this.weekarr.toString();
      this.wekar = wear.replace(/,/g, "|");
      //  console.error(this.wekar)
    },
    fullHous (x, y) {
      var self = this;
      this.radioIndex = x.key;
      self.arr = [];
    },
    //删除
    del () {
      var deler = {
        model: "11.综合维护-频次信息",
        code: "11302",
        input: {
          id: this.uid
        }
      };
      // console.error(this.bianHao)
      this.$post("CloudHIS/Business_Handle", deler).then(res => {
        alert("删除成功");
        (this.daiMa = ""),
          (this.uName = ""),
          (this.daYingname = ""),
          (this.pinYinma = ""),
          (this.pincidegree = ""),
          (this.pincinum = ""),
          (this.selectId = "");
        var allabout = {
          model: "11.综合维护-频次信息",
          code: "11303",
          input: {
            name: ""
          }
        };
        this.$post("CloudHIS/Business_Handle", allabout).then(res => {
          this.allitem = res.data;
        });
      });
    },
    //保存
    keepone () {
      // alert(2)

      var keep = {
        model: "11.综合维护-频次信息",
        code: "11301",
        input: {
          hospital_id: this.hospid == "" ? "1003" : this.hospid,
          Id: this.uid == "" ? "-1" : this.uid,
          Code: this.daiMa,
          name: this.uName,
          PrintName: this.daYingname,
          Times: this.pincidegree,
          IntervalUnit: this.selectId ? this.selectId : "0",
          DetailHour: this.timStr == "" ? "" : this.timStr,
          DetailWeek: this.wekar == "" ? "" : this.wekar
        }
      };

      this.$post("CloudHIS/Business_Handle", keep).then(res => {
        this.newinsert();
        this.oneabout();
        this.selectIdMR = 0;
      });
    },
    //新增
    newinsert () {
      (this.uid = ""),
        (this.daiMa = ""),
        (this.uName = ""),
        (this.daYingname = ""),
        (this.pinYinma = ""),
        (this.pincidegree = ""),
        (this.pincinum = ""),
        (this.selectId = "");
    },
    // 半小时多选
    Timeck (item, index) {
      var self = this;
      // this.activestyle=index
      // var check = this.datatime[index].check;
      // this.datatime[index].check = check === true ? false : true;
      if (this.arr.length === 0) {
        this.arr.push(item.label);
      } else {
        if (this.arr.indexOf(item.label) > -1) {
          this.arr.splice(this.arr.indexOf(item.label), 1);
        } else {
          this.arr.push(item.label);
        }
      }
      var newArr = self.arr.toString();
      this.timStr = newArr.replace(/,/g, "|");
      console.error(this.timStr);
    },
    // 获取行数据
    Dlick (item, index) {
      this.changeSelectStyle = index;
      this.uName = item.Name;
      this.daiMa = item.Code;
      (this.daYingname = item.PrintName), (this.pincidegree = item.Times);
      this.uid = item.Id;
      this.hospid = item.hospital_id;
      this.Dayweek = item.DetailWeek;
      this.selectIdMR = item.IntervalUnit;
      this.selectId = item.IntervalUnit;
      //  console.error(this.uid)
    },
    //查询
    oneabout () {
      var abouto = {
        model: "11.综合维护-频次信息",
        code: "11303",
        input: {
          name: this.jianMa ? this.jianMa : ""
        }
      };
      this.$post("CloudHIS/Business_Handle", abouto).then(res => {
        this.allitem = res.data;
        this.jianMa = "";
      });
    }
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.msg = this.$route.query;
    this.oneabout();
    var a = ["department", "unit_code"];
    this.queryG(a);
  },

  mounted () {
    var allabout = {
      model: "11.综合维护-频次信息",
      code: "11303",
      input: {
        name: ""
      }
    };
    this.$post("CloudHIS/Business_Handle", allabout).then(res => {
      this.allitem = res.data;
    });
  }
};
</script>

<style lang="scss">
/* .Frequency{position: fixed; width: 100%;height: 100%; top: 0; left: 0;} */
.FrequencyMedication {
  .Frequency .Tb_up,
  .Frequency .Tb_down {
    margin: 8px 10px;
    border: 1px solid #ddd;
    height: 32%;
    overflow-y: auto;
    clear: both;
  }
  .Frequency .table {
    border: none;
    margin-bottom: 0;
  }
  .Frequency .table td:first-child {
    border-left: none;
  }
  .Frequency .table td:last-child {
    border-right: none;
  }
  .Frequency .date {
    height: 25%;
    min-height: 165px;
  }
  .Frequency .date .lt {
    width: 260px;
    margin: 0 10px;
    height: 100%;
    margin-left: 130px;
  }
  .Frequency .date fieldset > div {
    padding-top: 5px;
  }
  .Frequency .date fieldset > div > p {
    width: 80px;
    float: left;
  }
  .Frequency .date .lt label {
    width: 50%;
    float: left;
    padding-left: 5px;
  }
  .Frequency .date .lt label input {
    position: relative;
    top: 1px;
    margin-right: 6px;
  }
  .Frequency .date .ct {
    width: 1151px;
    float: left;
    margin-left: 90px;
  }
  .Frequency .date .ct label {
    width: 80px;
    float: left;
    cursor: pointer;
    padding-top: 5px;
    text-align: center;
  }
  .Frequency .date .ct .p0 label {
    width: 115px;
    padding-top: 5px;
    margin: 0;
  }
  .Frequency .date .ct .p0 label input {
    position: relative;
    left: -6px;
    top: 1px;
  }
  .Frequency .date fieldset {
    margin: 0;
    clear: both;
    /* border:1px solid #ddd; */
    height: 100%;
  }
  .Frequency .date fieldset legend {
    padding: 0 5px;
    font-weight: 700;
    color: #256192;
    margin-bottom: -3px;
  }
  @media screen and (max-width: 1280px) {
    .Frequency .date .ct {
      width: auto !important;
    }
    .Frequency .date fieldset > div > p {
      width: 70px;
    }
  }
  .pubBig .m0 {
    padding: 0;
  }
  .drugBig fieldset legend {
    color: #256192;
    margin-bottom: -3px;
  }
  .marked label {
    background: none !important;
    border: none !important;
    cursor: pointer;
    min-width: 95px;
  }
  .marked input[type="radio"],
  .marked input[type="checkbox"] {
    position: relative;
    top: 1px;
    margin-right: 5px;
  }
  .oneBox {
    font-weight: bold;
    padding: 0 15px;
    background-size: contain;
    border-top: 1px solid #c5dcff;
    border-bottom: 1px solid #c5dcff;
    color: #256192;
    height: 28px;
    line-height: 26px;
    background: url(../../assets/line0.jpg) repeat-x;
    margin-bottom: 70px;
  }
  .form-group p {
    float: left;
    margin-right: 15px;
    margin-top: 5px;
  }
  .form-control {
    width: 150px;
    padding: 0 15px;
  }
  .pubBig .form-group p label,
  .blackBg .form-group p label {
    background: #f6f6f6;
    height: 32px;
    float: left;
    border: 1px solid #ccc;
    margin-right: -2px;
    position: relative;
    padding-left: 5px;
    line-height: 31px;
    z-index: 2;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .Frequency .Tb_up,
  .Frequency .Tb_down {
    margin-bottom: 45px;
    margin-right: 180px;
  }
  .baoCun {
    width: 135px;
    height: 35px;
    background: white;
    border: 1px solid #cccccc;
    float: right;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .active {
    background: #ccc;
  }
  .Frequency .Tb_down {
    margin-bottom: 17px;
    margin-right: 40px;
    height: 440px;
  }
}
</style>
